<template lang="html">
  <div class="jifen-product">
    <Header>
      <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
      <span slot="title">商品积分兑换</span>
    </Header>
    <mu-container>
      <mu-flex justify-content="center">
        <mu-grid-list class="gridlist-demo">
          <mu-grid-tile v-for="item in data" :key="item.name">
            <img :src="item.img" />
            <span slot="title">{{ item.name }}</span>
            <span slot="subTitle"
              >兑换： <b>{{ item.integral }}积分</b></span
            >
            <mu-button slot="action" icon @click="integral">
              <mu-icon value="add_shopping_cart"></mu-icon>
            </mu-button>
          </mu-grid-tile>
        </mu-grid-list>
      </mu-flex>
      <div class="product-by">兑换产品，由贵州国金投资有限公司赞助。</div>
    </mu-container>
    <mu-dialog :open="show" title="提示" transition="scale" overlay :overlay-close="false" width="350px" max-width="80%">
      <div class="mu-modal-content">
        <mu-icon value="info" color="blue" left></mu-icon>
        <div class="mu-modal-inner">
          抱歉！您当前积分为0分，家庭日用兑换需要200分，请多邀请几个人获得更多积分。
        </div>
      </div>
      <mu-button slot="actions" flat color="primary" textColor="black" @click="close">关闭</mu-button>
      <mu-button slot="actions" flat color="primary" @click="$router.push('/qrcode')">马上去邀请</mu-button>
    </mu-dialog>
  </div>
</template>

<script lang="js">
  // 引入header
  import Header from '@/components/Header';
  export default  {
    name: 'jifen-product',
    props: [],
    mounted () {

    },
    data () {
      return {
        // 数据
        data: [
          { name: '天然蜂蜜', integral: '500', img: 'http://api.guojintz.com/jifen/jf01.jpg' },
          { name: '家庭日用', integral: '200', img: 'http://api.guojintz.com/jifen/jf02.jpg' },
          { name: '100元话费', integral: '350', img: 'http://api.guojintz.com/jifen/jf03.jpg' },
          { name: '美的电饭煲', integral: '1000', img: 'http://api.guojintz.com/jifen/jf04.jpg' },
        ],
        // 切换提示框显引
        show: false
      }
    },
    methods: {
      // 后退
      back() {
          // this.$router.push('/my');
          this.$router.go(-1);
      },
      // 关闭
      close() {
        this.show = false;
      },
      // 兑换
      integral() {
        if (this.$store.state.integral <= 0) {
          this.show = true;
        }
      }
    },
    computed: {

    },
    // 注册组件
    components: { Header }
}
</script>

<style scoped lang="scss">
.jifen-product {
  .header {
    position: relative;
    .mu-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    span {
      display: block;
      text-align: center;
    }
  }
  .container {
    padding: 0;
    .product-by {
      color: rgba(0, 0, 0, 0.54);
      font-size: 14px;
      line-height: 48px;
      width: 100%;
      padding-top: 10px;
      text-align: center;
    }
  }
}
.mu-dialog {
  .mu-dialog-body {
    width: 300px;
    .mu-modal-content {
      width: 100%;
      display: flex;
      align-items: center;
      .mu-icon {
        margin-right: 8px;
      }
    }
  }
}
</style>
